<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap justify-center>
      <v-flex md8 sm10 xs12 style="margin-top: 20px;">
        <h1 class="date-title text-xs-left font-style">{{todayText}} {{week}}</h1>
      </v-flex>
      <v-flex md8 sm10 xs12>
        <v-flex xs12 d-flex justify-center>
          <div class="tab-wrapper">
            <div v-for="item of tabItems" :key="item.name" :class="{'tab-item': true, 'tab-selected': item.value === selected}" @click="selected = item.value">
              <span class="tab-title">{{item.name}}</span>
              <div class="tab-content">
              </div>
            </div>
          </div>
        </v-flex>

        <v-layout v-show="selected == 1" row wrap align-center class="tab-border elevation-1">
          <v-flex xs12>
              <v-flex md12 sm12 xs12>
                <v-layout row justify-start class="px-2">
                  <v-flex xs2 class="mx-1">
                    <v-text-field hide-details name="demandName" label="需求名称" v-model="queryForm.demandName"></v-text-field>
                  </v-flex>
                  <v-flex xs2 class="mx-1">
                    <v-select hide-details :items="projects_area"  v-model="queryForm.projectName" label="所属项目"></v-select>
                  </v-flex>
                  <v-flex xs2 class="mx-1">
                    <v-select hide-details :items="departmentsCopy"  v-model="queryForm.department" label="所属部门"></v-select>
                  </v-flex>
                  <!-- <v-flex xs2 class="mx-1">
                    <v-select hide-details :items="statusItems"  v-model="queryForm.status" label="需求状态"></v-select>
                  </v-flex> -->
                    <v-btn flat icon @click="clearConditions" dark color="cyan">
                      <v-icon>refresh</v-icon>
                    </v-btn>
                  <v-flex xs1 class="mx-1">
                    <v-btn @click="search" dark color="blue">
                      <v-icon>search</v-icon>
                      <span class="pl-2 subheading">查询</span>
                    </v-btn>
                  </v-flex>
                  <v-flex xs1 class="mx-1">
                    <v-btn @click="$router.push('/demanddetails?type=add')" dark color="cyan darken-2">
                      <v-icon>add</v-icon>
                      <span class="pl-2 subheading">新增</span>
                    </v-btn>
                  </v-flex>
                </v-layout>
              </v-flex>

            <v-data-table :loading="showProgress" :headers="headers" :items="tableData" hide-actions class="mt-3">
              <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
              <template slot="items" slot-scope="props">
                <td class="text-xs-center subheading" width="12%">{{ props.item.demandRecord.demandName }}</td>
                <td class="text-xs-center subheading" width="11%">{{ props.item.project }}</td>
                <td class="text-xs-center subheading" width="13%">{{ props.item.ddRecord.department | DpName }}</td>
                <td class="text-xs-center subheading" width="13%">{{ props.item.areaName }}</td>
                <td class="text-xs-center subheading" width="10%">{{ getTime(props.item.ddRecord.createTime, 'date') }}</td>
                <td class="text-xs-center subheading" width="10%">{{ getTime(props.item.ddRecord.deadTime, 'date') }}</td>
                <td class="text-xs-center subheading" width="10%">
                  <span d-flex nowrap>
                  <v-avatar size="16" :color="statusColor[props.item.ddRecord.status]"></v-avatar>
                  <span class="status-td">{{ props.item.ddRecord.status | Status }}</span>
                  </span>
                </td>
                <td class="text-xs-center" width="20%">
                  <v-btn :diabled="props.item.ddRecord.status == 1" flat round dark color="green" class="mx-1" @click="edit(props.item)">
                    <span class="mx-1">编辑</span>
                    <v-icon color="green">edit</v-icon>
                  </v-btn>
                  <v-btn flat round dark color="red" class="mx-1" @click="del(props.item)">
                    <span class="mx-1">删除</span>
                    <v-icon color="red">delete_forever</v-icon>
                  </v-btn>
                </td>
              </template>
              <template slot="no-data">
                <div class="text-xs-center">
                  <v-icon color="yellow darken-3">warning</v-icon>
                  <span class="subheading">暂无数据</span>
                </div>
              </template>
            </v-data-table>
            <div class="text-xs-center my-2">
              <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
            </div>
          </v-flex>
        </v-layout>
        <v-layout v-show="selected == 2" row wrap align-center justify-start class="demand-cards-wrapper elevation-1 tab-border">
          <v-flex md6 xs6 class="px-2 my-2 cursor" :key="i" v-for="(task, i) of allTasks" @click="gotoDemandList(task.department, task.departmentName,task.handOver)">
            <v-card color="white">
              <v-card-title class="title card-title-bg">
                <span class="mx-2">{{task.departmentName}}</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="title">
                <v-layout row wrap>
                  <v-flex md6 xs8>
                    <ul>
                      <li>总任务：</li>
                      <li class="orange--text">即将到期任务：</li>
                      <li class="red--text">延期任务：</li>
                      <li class="red--text">回滚任务：</li>
                    </ul>
                  </v-flex>
                  <v-flex md6 xs4>
                    <ul>
                      <li>
                        <!-- <v-avatar size="30" color="grey" class="white--text"> -->
                          {{task.totalDemand}}
                        <!-- </v-avatar> -->
                      </li>
                      <li class="orange--text">
                        <!-- <v-avatar size="30" color="orange" class="white--text"> -->
                          {{task.expireDemand}}
                        <!-- </v-avatar> -->
                      </li>
                      <li class="red--text">
                        <!-- <v-avatar size="30" color="red" class="white--text"> -->
                          {{task.delayDemand}}
                        <!-- </v-avatar> -->
                      </li>
                       <li class="red--text">
                        <!-- <v-avatar size="30" color="red darken-3" class="white--text"> -->
                          {{task.rollback}}
                        <!-- </v-avatar> -->
                      </li>
                    </ul>
                  </v-flex>

                  <!-- <v-flex xs6>
                    <div class=" text-xs-center">总任务</div>
                    <div class="display-1 text-xs-center">{{task.totalDemand}}</div>
                  </v-flex>
                  <v-flex xs6>
                    <div class=" text-xs-center">即将到期任务：</div>
                    <div class="display-1 text-xs-center orange--text">{{task.expireDemand}}</div>
                  </v-flex>
                  <v-flex xs6>
                    <div class=" text-xs-center">延期任务：</div>
                    <div class="display-1 text-xs-center red--text">{{task.delayDemand}}</div>
                  </v-flex>
                  <v-flex xs6>
                    <div class=" text-xs-center">回滚任务：</div>
                    <div class="display-1 text-xs-center red--text">{{task.rollback}}</div>
                  </v-flex> -->
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>

      </v-flex>
    </v-layout>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import { getToday, getTime } from "../../util";
import * as demand from "../../api/demand";
import { mapState } from "vuex";
let PROJECT = {}, DEPARTMENT = {}
export default {
  data: () => ({
    tabs: null,
    btnToggle: null,
    showProgress: false,
    dialog: false,
    modal: false,
    modalText: "确认删除该条需求吗？",
    allTasks: [],
    todayText: getToday(),
    handover: "design",
    queryForm: {},
    weekdays: [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六"
    ],
    week: "",
    dayData: {},
    selected: 1,
    tabItems: [
      {
        name: "需求管理",
        value: 1
      },
      {
        name: "部门管理",
        value: 2
      }
    ],
    projectItems: [],
    tableData: [],
    showProgress: false,
    statusColor: {
      "0": "amber",
      "1": "green",
      "2": "indigo",
      "3": "red"
    },
    statusItems: [
      {
        text: "未完成",
        value: 1
      },
      {
        text: "已完成",
        value: 2
      }
    ],
    headers: [
      {
        text: "需求名称",
        value: "projName",
        align: "center",
        sortable: false
      },
      {
        text: "所属项目",
        value: "releaseTime",
        align: "center",
        sortable: false
      },
      {
        text: "所属部门",
        value: "version",
        align: "center",
        sortable: false
      },
      {
        text: "所属公众号",
        value: "version",
        align: "center",
        sortable: false
      },
      {
        text: "提交日期",
        value: "vleader",
        align: "center",
        sortable: false
      },
      {
        text: "完成日期",
        value: "vleader",
        align: "center",
        sortable: false
      },
      {
        text: "任务状态",
        value: "status",
        align: "center",
        sortable: false
      },
      {
        text: "操作",
        value: "actions",
        align: "center",
        sortable: false
      }
    ],
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    projectsCopy: [],
    departmentsCopy: [],
    isSearch: false,
    delItem: {},
     projTypesItems: {
      "0": "无",
      "1": "客户端",
      "2": "服务端"
    },
    projects_area:[]

  }),
  computed: {
    ...mapState(["state_projects", "state_departments"])
  },
  mounted() {
    let day = new Date();
    this.week = this.weekdays[day.getDay()];
   this.projectsCopy  = _.slice(this.state_projects)
   this.departmentsCopy  = _.slice(this.state_departments)
   if(this.$route.query.select == '2') {
     this.selected = 2
   }
    $Vue.$off('areaCodeChange')
    $Vue.$on('areaCodeChange', ()=>{
    this.getStatistics();
    this.getDemandList()
    })
  // this.getProjectList();
  this.$nextTick(()=>{
      _.forEach(this.state_projects, (item, i)=>{
      PROJECT[item.value] = item.text
    })
    _.forEach(this.state_departments, (item, i)=>{
      DEPARTMENT[item.value] = item.text
    })
  })
    this.getProjectList()

  this.getStatistics();
  this.getDemandList()
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  filters: {
    ProjName: function(val) {
      return PROJECT[val];
    },
    DpName: function(val) {
      return DEPARTMENT[val];
    }
  },
  methods: {
    getTime,
    getProjectList() {
      demand.getProjectList.r().then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          let projects = [];
          _.forEach(d.dataList, (item, i)=>{
            projects.push({
              text: item.projectName + '-' + this.projTypesItems[item.type]+ '-' + item.area.areaName,
              value: item.id
            })
          })
          this.projects_area = projects;
        }
      });
    },
    getStatistics() {
      demand.getStatistics.r().then(({ data }) => {
        if (data.result == 0) {
          this.allTasks = data.data.dataList;
        }
      });
    },
    getDemandList() {
      let opt = {
        offset: this.offset,
        limit: this.limit,
      };
      demand.getDemandList.r(opt).then(({ data }) => {
        if (data.result == 0) {
          this.tableData = data.data.dataList;
          console.error(data.data.dataList)
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
        }
      });
    },
    searchDemand(form){
      demand.searchDemand.r(form).then(({ data }) => {
        if (data.result == 0) {
          this.tableData = data.data.dataList;
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
        }
      });
    },
    delDemand() {
      let opt = {
        id: this.delItem.demandRecord.id
      };
      demand.delDemand.r(opt).then(({ data }) => {
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        if (data.result == 0) {
          this.getDemandList()
        } else {
        }
      });
      this.modal = false;
    },
    gotoDemandList(type,name, handover) {
      let ho = handover ? "design" : "tech";
      this.$router.push(`/demandlist?type=${type}&handover=${ho}&name=${name}`);
    },
    search(fromPage) {
      let valid = 0;
      let form = {};
      _.forEach(this.queryForm, (item, key) => {
         form[key] = item ;
         valid += 1;
      });
      if (valid == 0) {
        return $Vue.$emit("toggleSnackbar", {
          text: '请至少选择一个查询条件！'
        });
      }
      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      form.limit = this.limit;
      form.offset = this.offset;
      this.searchDemand(form)
      this.isSearch = true;
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getDemandList();
      } else {
        this.search("wyvj");
      }
    },
    edit(item) {
      this.$router.push(
        `/demanddetails?type=modify&demandid=${item.demandRecord.id}&department=${item.ddRecord.department}`
      );
    },
    del(item) {
      this.delItem = item;
      this.modal = true;
    },
    confirmModal() {
      this.delDemand()
    },
    clearConditions() {
      this.queryForm = {}
      this.getDemandList();
    }
  }
};
</script>

<style lang="less" scoped>
.demand-cards-wrapper {
  ul {
    padding-left: 2rem;
  }
  li {
    list-style: none;
    margin: 1rem 0;
    line-height: 36px;
  }
}
.date-title {
  font-size: 2.5rem;
  font-weight: 400;
  padding: 0 0.5rem;
}

.font-style6 {
  font-size: 2rem;
  font-weight: bold;
  font-family: helvetica;
  text-align: center;
  background: -webkit-linear-gradient(left, #009688, #fe5d4b); /* 背景色渐变 */
  -webkit-background-clip: text; /* 规定背景的划分区域 */
  -webkit-text-fill-color: transparent; /* 防止字体颜色覆盖 */
}

.tab-border {
  border: 1px solid #ddd;
  background: #fafafa;
  padding: 0 5px;
}



@media only screen and (max-width: 599px) {
  .demand-cards-wrapper {
    ul {
      padding-left: 0.6rem;
    }
    li {
      margin: 0.6rem 0;
    }
  }
  .date-title {
    font-size: 1.2rem;
    font-weight: 400;
    padding: 0 0.5rem;
  }
}
</style>


